<template>
  <div class="right-column">
    <!-- 今日课程一览 -->
    <div class="column-card">
      <div class="card-header">
        <i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>
        <h3>今日课程一览</h3>
      </div>
      
      <div class="course-content">
        <ul class="course-list">
          <li class="course-item">
            <span class="course-time">09:00-10:00</span>
            <span class="course-info">李同学 语法课程</span>
          </li>
          <li class="course-item">
            <span class="course-time">15:00</span>
            <span class="course-info">王同学 口语练习</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 待处理作业/测验 -->
    <div class="column-card mt-20">
      <div class="card-header">
        <i class="fas fa-file-text" aria-hidden="true"></i>
        <h3>待处理作业/测验</h3>
        <span class="badge">{{ pendingCount }}</span>
      </div>
      
      <div class="assignment-content">
        <ul class="assignment-list">
          <li class="assignment-item">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
            <span>李同学 作文待批改</span>
          </li>
          <li class="assignment-item">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
            <span>小张 单词测验待反馈</span>
          </li>
          <!-- 预留一个空项，保持与“3个待处理”的数字对应 -->
          <li class="assignment-item">
            <i class="fas fa-angle-right" aria-hidden="true"></i>
            <span>待添加任务</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightColumn',
  data() {
    return {
      pendingCount: 3 // 待处理数量
    }
  }
}
</script>

<style scoped>
.right-column {
  width: 60%; /* 右栏宽度占比，大于左栏以突出概览数据 */
  box-sizing: border-box;
}

.column-card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  padding: 15px 20px;
  background-color: #fff;
}

.mt-20 {
  margin-top: 20px;
}

/* 卡片头部样式（与左栏统一） */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  color: #333;
}

.card-header h3 i {
  margin-right: 8px;
  color: #0084ff;
}

/* 待处理数量徽章 */
.badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

/* 今日课程列表 */
.course-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.course-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f0f0;
  align-items: center;
}

.course-item:last-child {
  border-bottom: none;
}

.course-time {
  width: 100px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.course-info {
  flex: 1;
  font-size: 14px;
  color: #555;
}

/* 待处理作业列表 */
.assignment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.assignment-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f0f0;
  font-size: 14px;
  color: #555;
}

.assignment-item:last-child {
  border-bottom: none;
}

.assignment-item i {
  color: #0084ff;
  margin-right: 10px;
  font-size: 12px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .right-column {
    width: 100%;
  }
}
</style>
